<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form :inline="true" ref="form"  :model="form" label-width="80px" class="demo-form-inline" size="mini">
        <el-form-item label="员工名称">
            <el-input v-model="form.name" placeholder="请输入员工名称"></el-input>
        </el-form-item>
        <el-form-item label="部门名称">
            <el-select v-model="form.did" placeholder="请选择部门" :label-width="formLabelWidth">
                <el-option v-for="department in departments" :key="department.id" :label="department.name" :value="department.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="dialogFormVisible = true">员工账号分配</el-button>
    <!--    数据表格-->
    <el-table
            ref="functionTable"
            :data="tableData"
            style="width: 100%">
        <el-table-column
                label="员工编号"
        >
            <template slot-scope="scope">
                <span >{{scope.row.no}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="员工姓名"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.name}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="员工账号"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.loginAccount}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="职位"
        >
            <template slot-scope="scope">
                <span >{{scope.row.pname}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="所属部门"
        >
            <template slot-scope="scope">
                <span >{{scope.row.dname}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="员工成绩"
        >
            <template slot-scope="scope">
                <span>{{scope.row.grade}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="入职时间"
        >
            <template slot-scope="scope">
                <span>{{scope.row.entryTime}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="员工状态"
        >
            <template slot-scope="scope">
                <span >{{scope.row.status}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="账号状态"
        >
            <template slot-scope="scope">
                <span v-if="scope.row.accountStatus=='1'" style="background-color: #67C23A;color: white">已激活</span>
                <span v-if="scope.row.accountStatus=='0'" style="background-color: #707277;color: white">未激活</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        v-if="scope.row.accountStatus=='1'"
                        type="success"
                        size="mini"
                        icon="el-icon-check"
                        @click="functionDelete1(scope.$index,scope.row)"></el-button>
                <el-button
                        v-if="scope.row.accountStatus=='0'"
                        type="info"
                        size="mini"
                        icon="el-icon-check"
                        @click="functionDelete0(scope.$index,scope.row)"></el-button>
                <el-button
                        size="mini"
                        icon="el-icon-edit"
                        type="danger"
                        @click="functionEdit(scope.$index,scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            small
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>
    <el-dialog title="员工管理" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="fun">
            <el-form-item label="员工账号" :label-width="formLabelWidth">
                <!--下拉菜单-->
                <el-select v-model="fun.loginAccount" placeholder="请选择分配的账号" :label-width="formLabelWidth">
                    <el-option v-for="loginAccount in loginAccounts" :label="loginAccount.loginAccount" :value="loginAccount.loginAccount">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="员工编号" :label-width="formLabelWidth">
                <el-input v-model="fun.no"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工姓名" :label-width="formLabelWidth">
                <el-input v-model="fun.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工电话" :label-width="formLabelWidth">
                <el-input v-model="fun.tel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="fun.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属部门" :label-width="formLabelWidth">
                <el-select v-model="fun.did" placeholder="请选择部门" :label-width="formLabelWidth" @change="selectPostName">
                    <el-option v-for="department in departments" :label="department.name" :value="department.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth">
                <el-select v-model="fun.pname" placeholder="请选择职位"  :label-width="formLabelWidth">
                    <el-option v-for="post in posts" :key="post.id" :label="post.name" :value="post.id">
                        <el-option v-if="post in posts" :key="post.id" :label="post.name" :value="post.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="员工成绩" :label-width="formLabelWidth">
                <el-input v-model="fun.grade" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入职时间" :label-width="formLabelWidth">
                <template>
                    <div class="block">
                        <!--<span class="demonstration">入住时间</span>-->
                        <el-date-picker
                                v-model="fun.entryTime"
                                type="datetime"
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </div>
                </template>
            </el-form-item>
            <el-form-item label="员工状态" :label-width="formLabelWidth">
                <el-select v-model="fun.status" placeholder="请选择员工状态" :label-width="formLabelWidth">
                        <el-option v-for="statu in status" :label="statu.status" :value="statu.status">
                        </el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveFunction()">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                tableData: null,
                fatherFunctionsData:null,
                total: 0,
                current: 1,
                pageSize: 10,
                dialogFormVisible: false,
                loginAccounts: [],
                status:[],
                departments: [],
                posts:[],
                form:{
                    name: null,
                    dId: null,
                },
                fun:{
                    id:'',
                    no:'',
                    tel:'',
                    name:'',
                    loginAccount:'',
                    grade:'',
                    pname:'',
                    dname:'',
                    entryTime:'',
                    status:'',
                    password:'',
                    accountStatus:'',
                    pId:'',
                    cId:'',
                    dId:'',
                },formLabelWidth:"120px"
            }
        },
        methods:{
            onSubmit(){
               /* if (this.form.name !=null || this.form.did !=null){*/
                    axios.get("/staff/"+this.current+"/"+this.form.name+"/"+this.form.did).then(value =>{
                        if(value.data.code==1){
                        this.tableData=value.data.data;
                        this.total=value.data.data.total;
                        this.current=1;
                        this.pageSize=value.data.data.pageSize;
                        this.form.name=null;
                        this.form.dId=null;

                    }
                    })
               /* }*/
            },
            loadPage(current) {
                this.current=current;
                axios.get("/staff/"+this.current)
                    .then(value => {
                    if (value.data.code==1){
                    this.tableData=value.data.data.records;
                    this.total=value.data.data.total;
                    this.current=value.data.data.current;
                    this.pageSize=value.data.data.pageSize;
                }
            });
            },selectPostName(val){
                axios.get("/posts/"+val).then(value => {
                    if(value.data.code==1) {
                        this.posts = value.data.data;
                    }
                });
            },
            functionAll(){
                axios.get("/staff").then(value => {
                    if(value.data.code==1) {
                        this.loginAccounts = value.data.data;
                    }
                    });
            },
            functionEdit(index,row){
                axios.get("/staffs/"+row.id).then(value => {
                    if (value.data.code==1){
                        this.fun=value.data.data;
                        this.dialogFormVisible=true;
                    }
                })
                /*this.fun=JSON.parse(JSON.stringify(row))
                this.dialogFormVisible=true;*/
            },functionDelete1(index,row){
                if(confirm("确定要停用吗?")){
                    axios.delete("/staff/"+this.current+"/"+row.id+"/").then(value => {
                        if(value.data.code==1){
                            this.tableData=value.data.data.records;
                            this.total=value.data.data.total;
                            this.current=value.data.data.current;
                            this.pageSize=value.data.data.pageSize;
                    }
                });
                }
            },functionDelete0(index,row){
                if(confirm("确定要启用吗?")){
                    axios.delete("/staff/"+this.current+"/"+row.id+"/").then(value => {
                        if(value.data.code==1){
                            this.tableData=value.data.data.records;
                            this.total=value.data.data.total;
                            this.current=value.data.data.current;
                            this.pageSize=value.data.data.pageSize;
                        }
                    });
                }
            },closeMyDialog(){
                this.fun={   //关闭对话框时更改product属性
                    id:'',
                    no:'',
                    tel:'',
                    name:'',
                    pname:'',
                    dname:'',
                    loginAccount:'',
                    grade:'',
                    entryTime:'',
                    status:'',
                    password:'',
                    accountStatus:'',
                    pId:'',
                    cId:'',
                    dId:''
                }
            },functionAllDepartments(){
                axios.get("/department").then(value => {
                    if(value.data.code==1) {
                        this.departments = value.data.data;
                    }
                });
            },
            functionAllStatus(){
                axios.get("/staffs").then(value => {
                    if(value.data.code==1) {
                        this.status = value.data.data;
                    }
                });
            },
            saveFunction(){
                if(this.fun.id==''){
                    axios.post("/staff",this.fun).then(value => {
                        if(value.data.code == 1){
                        this.loadPage(this.current);
                        this.$message(value.data.msg);
                    }
                });
                }else{
                    axios.put("/staff",this.fun).then(value => {
                        if(value.data.code==1){
                        this.loadPage(this.current)
                        this.$message(value.data.msg);
                    }
                });
                }
                this.dialogFormVisible=false;
            }
        },mounted(){
            this.functionAllDepartments();
            this.functionAllStatus();
            this.functionAll();
            this.loadPage(1);
        }

    })
</script>

</html>